<template>
  <div class="menuWeb">
    <div class="flr btnGroup">
      <div class="flbox memo">
      </div>
      <div class="flone">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </div>
    <div class="treeBox">
      <el-tree
        :data="data"
        :loading="loading"
        node-key="id"
        default-expand-all
        draggable>

        <div class="custom-tree-node flr" slot-scope="{ node, data }">
          <div class="flbox fl-middle">{{ node.label }} <span class="linkText">{{data.url}}</span></div>
          <div class="flone" >
            <el-button
              type="text"
              @click="(e)=>handleAdd(e,node,data)">
              <i class="el-icon-circle-plus-outline"></i>
            </el-button>
            <el-button
              type="text"
              @click="(e)=>handleEdit(e,node,data)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              type="text"
              @click="(e)=>handleDel(e,node,data)">
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </div>

      </el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading:true,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    created(){window.ss = this;
      this.getDetail()
    },
    methods: {
      getDetail(){
        this.loading = true;
        this.api("temp.get", 5).then((res)=>{
          let data = JSON.parse(res.data.content);
          let getResult = function(arr){
            return arr.map((v,idx)=>{
              let item = {id:_.UUID(),label:v.text,url:v.url};
              if(v.list){
                item.children = getResult(v.list)
              }else{
                item.leaf = 1;
              }
              return item;
            })
          }
          this.data = getResult(data);
        }).finally(()=>{
          this.loading = false;
        })
      },
      handleAdd(e,node,data){
        this.dialogEdit({
          title:`新增 - ${data.label}`,
          labelWidth:'4em',
          width:'420px',
          size:24,
          columns:[
            {text: "名称", name: "label", type: "input"},
            {text: "地址", name: "url", type: "input"},
          ],
          rules:{
            label:['required']
          },
          formatter:(d)=>{
            const newChild = { id:_.UUID(), label: d.label,url:d.url, children: [] };
            if (!data.children) {
              this.$set(data, 'children', []);
            }
            data.children.push(newChild);
            this.dialogEdit().onClose();
          }
        })
        e.stopPropagation()
      },
      handleEdit(e,node,data){
        this.dialogEdit({
          title:`编辑 - ${data.label}`,
          row:_.pick(data,['label','url']),
          labelWidth:'4em',
          width:'420px',
          size:24,
          columns:[
            {text: "名称", name: "label", type: "input"},
            {text: "地址", name: "url", type: "input"},
          ],
          rules:{
            label:['required']
          },
          formatter:(d)=>{
            Object.assign(data,d);
            this.dialogEdit().onClose();
          }
        })
        e.stopPropagation()
      },
      handleDel(e,node,data){
        this.$confirm('确定删除？', '提示', {
          type: 'warning'
        }).then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
        })
        e.stopPropagation()
      },

      // 保存
      handleSubmitData(){
        let data = this.data;
        let getResult = function(arr){
          return arr.map((v,idx)=>{
            let item = {id:v.id,text:v.label,url:v.url};
            if(v.children?.length){
              item.list = getResult(v.children)
            }else{
              item.leaf = 1;
            }
            return item;
          })
        }
        //
        return {
          id:5,
          content:JSON.stringify(getResult(data))
        };
      },
      handleSubmit(){
        let data = this.handleSubmitData();
        this.api("temp.edit",data).then((res)=>{
          this.$message.success('已保存')
        })
      }
    }
  };
</script>
